<template>
	<view v-loading="loading" class="module-statistics-chart" :style="{height:height,width:width}">
	    <view class="title" @click="handleClick">
	      <cat2-bug-block color="rgb(251, 177, 63)" />
	      <text class="text">{{ $t('document') }}</text>
	      <text class="text number">{{ documentStatistics.total }}</text>
	    </view>
	  </view>
</template>

<script>
	import Cat2BugBlock from "./Cat2BugBlock";
	import { documentStatistics } from "@/api/system/dashboard.js"
	export default {
		name: "DocumentStatisticsChart",
		components: { Cat2BugBlock },
		props: {
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '80rpx'
			},
		},
		data() {
		    return {
		        loading: false,
		        documentStatistics:{}
		    }
		},
		computed: {
		    /** 获取项目id */
		    projectId() {
		        return parseInt(this.$store.state.user.config.currentProjectId);
		    },
		},
		methods: {
		    handleClick() {
		        // const targetRoute = this.$router.resolve({ name:'Case', params: {}});
		        // window.open(targetRoute.href, '_blank');
		    },
		    refresh() {
		        this.loading = true;
		        documentStatistics(this.projectId).then(res=>{
					this.loading = false;
					this.documentStatistics = res.data;
		        }).catch(e=>this.loading = false);
		    }
		}
	}
</script>

<style lang="scss" scoped>
.module-statistics-chart {
  position: relative;
  background-color: white;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .title:hover {
    cursor: pointer;
  }
  .title {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	padding: 10rpx;
    > .text {
      flex-shrink: 0;
    }
    > .number {
      flex: 1;
      font-size: 2rem;
      text-align: center;
    }
  }
}
</style>
